List Builder Detail View PropertiesEmbedded detail view properties
Description
Settings for customizing how embedded content in a List is shown, including the method to show the content, the image used for the Row open/close icon, and options to add your own event handler when the content is shown.
Discussion
The Embedded detail view properties provide options to customize how users interact with a List to show embedded content. Options for setting animation duration, the image shown for the <RowOpen/CloseIndicator> List layout placeholder, and the action the user takes to show/hide content are configured with these settings. You can also add your own event handler to execute client-side code or make an Ajax Callback when the content is shown.
Embedded Detail View Properties
- Property
- Description
- Animation duration (ms)
Specifies how many milliseconds the animation used to display the embedded Detail View should last. The default value for this property is 300. Set Animation duration (ms) to 0 to turn animations off.
- Method for showing Detail View
Defines how the user interacts with the List to open and close an embedded Detail View. You can choose one of the following:
- Option
- Description
- Click on row
The embedded content is shown when the user clicks anywhere on a List row.
- Click on row open/close icon
The embedded content is shown only when the Row open/close icon is clicked. Select this option if you also want to add your own custom code to the List row's click event.
- Row open/close icon
The image used for the <RowOpen/CloseIndicator> List layout placeholder. You can only select one icon. The icon is rotated 90 degrees when the List row is expanded.
The Row open/close icon can only be added to a Columnar layout. See Embedding Detail Views and Child Lists into a List to learn more.
- On animation complete (show)
This event handler is called after the animation to display the embedded detail view completes and the content is visible. You can add your own custom code to this event to call when the embedded Detail View is shown. For example, the code below when added to this event displays a popup alert with the message "Detail view has opened!"
alert("Detail view has opened!");This event has no arguments.
Videos
Embedding Child Lists in the Top-most Parent List
It is quite common to build UX components with a series of related lists. For example, you might have lists for Customers, Orders and OrderDetails. When you select a row in the Custom list, the Orders list is repopulated showing he orders for the selected Customer, and so on. You might want to embed these child lists inside the top-most parent list (i.e. the Customer list in this example). so that the child Lists are only shown when the user taps on a row in the parent list.
In this video we show how this can be done.
Webinar: Embedded Detail View in a List Control
In this Alpha Anywhere Demo and Q&A session, we demonstrate the new Embedded Detail View in a List Control feature in Alpha Anywhere 4.6.2.7 release.
Did you miss the webinar? Register for the weekly Wednesday webinars and join us for the next broadcast.
See Also